body{
    overflow-x: hidden;
    background-image: url("resources/background.png");
    background-size:cover;
}

.DavisDiary{
    width: 420px;
    height: 420px;
    object-fit: contain;
    left: 85%;
    top: 25%;
    margin-left: -210px;
    margin-top: -210px;
    position: absolute;
    grid-template-columns: fit-content(420px) fit-content(420px) auto;
    background-image: url("resources/deardavis.png");
}

.DavisBackdrop{
    width: 100%;
    height: 100%;
    grid-template-columns: fit-content(420px) fit-content(420px) auto;
}

.DavisText{
    font-family: cursive;
    font-size: 12px;
}

.coolAssHyperlink{
    color: darkred  
}

.coolAssHyperlink:link{
    color: darkred;
}

.coolAssHyperlink:visited{
    color:brown
}

.Mainframe{
    font-family: cursive;
    color: darkred;
    text-decoration-color: darkred;
}

.COOLTEXT1{
    top: 10%;
    left: 50%;
}

.coolPhoto1{
    width: 750px;
    height: 120px;
}

.EnterButton{
    width: 256;
    height: 256;

    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -128;
    margin-top: -128;

    background-image: url("resources/CornerGuyFilled\ \(2\).png");
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: larger;
    color: red;

    border-color: transparent;
    background-color: transparent;

    z-index: 100;
    transition: 0.5s;
}

.EnterButton:hover{
    transform: scale(1.5) perspective(1px);
    transition: 0.5s;
}

.EnterImg{
    src: url("https://e7.pngegg.com/pngimages/160/286/png-clipart-red-button-panic-button-no-text-icons-logos-emojis-panic-buttons.png");
    vertical-align: text-bottom;
}

.door{
    width: 1000px;
    height: 1000px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -1000;
    margin-top: -500;
    z-index: 99;
}

.door2{
    width: 1000px;
    height: 1000px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: 0;
    margin-top: -500;
    z-index: 99;

}

/* ANIMATION */

@keyframes  OpeningAnim {
    0% {left: 50%; top: 50%;}
    100%{left:-50%; top: 50%;}
}

@keyframes  OpeningAnim2 {
    0% {left: 50%; top: 50%;}
    100%{left: 150%; top: 50%;}
}