body {
    background: url('https://i.pinimg.com/1200x/41/fc/46/41fc466371f1ae3fe840f00de1c50d4d.jpg');
    background-size: cover;
    background-color:rgb(109, 17, 17);
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

* {
    
    box-sizing: border-box;
    margin: 0;
    padding: o;
}

img {
    max-width: 100%;
    height: auto;
    
}

@font-face {
    font-family: "Aurora";
    src: url("https://meyyebs.neocities.org/fonts/AURORA.otf") format("truetype");
}

@font-face {
    font-family: "Blobs";
    src: url("Childlike\ Blobs.ttf") format("truetype");
}

@font-face {
    font-family: "inked";
    src: url("INKEDWEI.TTF") format("truetype");
}





.grid-container {
    display: grid;
    grid-template-areas: 
    'tile'
    'navigation'
    'heycontainer'
    'welcontainer';
    gap: 1vw;
}




.tile {
    grid-area: tile;
    
    max-width: fit-content;
    margin: 0 auto;
    background: url('https://i.pinimg.com/736x/36/e1/83/36e18313d742b7debf4331862ec8d422.jpg');
    background-size: cover;
    
    border-radius: 2vw;
    border: 0.5vw solid rgb(7, 6, 6);
    padding: 2.5vw 2.5vw;
    
}

h1 {
    transform: rotate(3deg);
    font-size: 8.7vw;
    font-family: 'inked';
    color: rgb(249, 169, 30);
    
    text-align: center;
}


.navigation{
    grid-area: navigation;
    display: flex;
    justify-content: center;
    
}

.image-collection {
      display: flex;
      justify-content: space-around;
      gap: 3vw;
    
      
}

.nav {
    width: 8.1vw;
    height: auto;
    flex-shrink: 0;
    flex-grow: 0;
    display: block;
}


.heycontainer {
    grid-area: heycontainer;
    display: flex;
    justify-content: center; 
}

.rdr img {
    border-radius: 0.4vw;
}

.drawing img {
    margin-top: -1vw;
}

.flexhey {
    display: flex;
    justify-content: space-between;
    width: 63.8%;
    gap: 4%;
    
}

.header {
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
    padding-top: 1vw;
}

.welcontainer {
    grid-area: welcontainer;
    display: flex;
    justify-content: center;
   
}

.welcontainer img{
     width: 40vw;
}
.welcontainer p{
    color: white;
    font-weight: bold;
    font-size: 2vw;
}
/* AAAAAAAAAAAAAAAAAAAAAAA */

@media (max-width: 600px){
    .image-collection {
        gap: 3.5vw;
    }
    .grid-container {
        gap: 2vw;
    }
    .rdr img {
        width: 110vw;
    }
    .flexhey {
        width: 66vw;
    }
   
    






/* дальше надо ругелировать под конкретную картинку */