*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
:root,body{
    height: 100%;
}
body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition-property: opacity;
    transition-duration: .125s;
    background-color: #2f3957;
    color:#2f3957;  
    overflow-x: hidden;
}
body div#A{
    font-size: clamp(2rem,5vw,4rem);
    font-family: "Rancho", cursive;
}
body div.container>div,body div#A{
    font-weight: 400;
    font-style: normal;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
body div.container>div{
    width:100%;
    height: 100%;
}
body div#A{
    user-select: none;
}
body div#A div:nth-child(1){
    transition-property: color;
    transition-duration: 2s;
    text-shadow: 1px 1px black,-1px -1px black;
}
body div#A div:nth-child(2){
    transition-property: color, transform;
    transition-duration: 1s;
    transition-delay: 1s;
    align-self: flex-end;
    font-size: clamp(1rem,5vw,2rem);
}
body div#A div:nth-child(1):hover+div{
    color:#000;
    transform: rotateY(180deg);
}
body>div.container{
    width:100%;
    height: 100%;
}
body div.container>div.w{
    position:absolute;
    left: 0;
    width: 100%;
    height: fit-content;
    padding-bottom: 15px;
    background-image: linear-gradient(to bottom,#2f3957 1%,black 99%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
div.w h2{
    margin-bottom: 20px;
    color:#3e4c75;
    text-shadow: -2px 2px #171717;
}
div.w div.c{
    border-radius: 5px;
    width:98%;
    background-color: hsla(225, 30%, 26%, 0.514);
    display: flex;
    padding:10px;
    gap:10px;
    flex-wrap: wrap;
}
div.w div.c>a{
    text-decoration: none;
    width:calc(100%/3 - 7px);
}
div.w div.c>a>div{
    font-weight: 600;
    width:100%;
    background-color: #171717;
    padding: 5px;
    border-radius: 5px;
    color:white;
}
div.w div.c>a>div>img{
    border-radius: 5px;
    width:100%;
}
footer{
    position: absolute;
    width:100%;
    bottom: 0;
    color:white;
    display: flex;
    justify-content: space-between;
    padding: 15px 10px 20px 10px;
}
footer a{
    color:white;
    font-weight: 600;
    text-decoration: none;
}
div.w div.c{
        margin-bottom:87px;
}
@media (max-width:768px) {
    div.w div.c>a{
        width:calc(100% / 2 - 5px);
    }
}
@media (max-width:580px) {
    footer{
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
}
@media (max-width:480px) {
    body div#A>div:first-of-type{
        font-size: clamp(1.5rem,5vw,4rem);
    }
    div.w div.c>a{
        width:100%;
    }
    body div.container>div.w{
       height: fit-content;
    }
}
@media (min-width:900px){
    body>div.container,footer{
        width:900px;
    }
    div.w div.c{
        width:900px;
    }
}