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


body {
	  font-family: Courier New, American Typewriter;
	  background-image: url("../images/backgrounds/stripes.png");
    background-repeat: repeat;
    background-position: top left;
}

.page{
    width:100%;
    max-width: 1200px;
    margin:40px auto;
}


nav {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
}

nav a {
    font-size:18px;
    font-weight: bold;
    display:block;
    padding:12px 26px;
    text-decoration:none;
    border-bottom:none;

    border-radius:12px 12px 0 0;

    box-shadow:
        inset 0 1px rgba(255,255,255,.8),
        0 -1px 2px rgba(0,0,0,.08);

    transition:.15s;
}

nav a:link {
    color: #33435c;
}

nav a:hover{
    transform:translateY(-3px);
    color:#13394d;
}

nav a:nth-child(1){
    background:#E6556A; 
}

nav a:nth-child(2){
    background:#F5D269; 
}

nav a:nth-child(3){
    background:#5291AA; 
}

nav a:nth-child(4){
    background:#7367A5; 
}

nav a:nth-child(5){
    background:#87C090; 
}

nav a:nth-child(6){
    background:#c4dde7; 
}

nav a:nth-child(7){
    background:#F8DBB4; 
}








main{
    font-size:18px;
    font-weight: bold;
    line-height:1.8;

	position:relative;
    z-index:2;
    margin-top:-4px;

	display:grid;
	grid-template-columns:220px 1fr;
	gap:20px;

	padding-left:30px;
	
	
	background-image:
        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent 30px,
            rgba(70, 185, 200, .45) 30px,
            rgba(70,185,200,.45) 32px
        ),
        url("../images/backgrounds/paper6.png");
	background-repeat:
        repeat;
}

main::before{

    content:"";

    position:absolute;

    top:0;
    left:-45px;      

    width:50px;
    height:100%;

    background:url("../images/backgrounds/left_border.png")
               repeat-y left top;

    background-size:50px auto;

    pointer-events:none;

}


a:link {
    color: #33435c;
}

a:hover {
    text-decoration: none;
}

a:visited {
    color: purple;
}

details summary {
    color: #33435c;
}


/*Aside*/

aside{
	padding:10px;
}

aside img{
	width:140%;
    transform: translateX(-40px);
}

aside h2{
    display: inline;
    background: linear-gradient(
        175deg,
        transparent 5%,
        rgba(255, 235, 80, 0.55) 11%,
        rgba(255, 235, 80, 0.65) 60%,
        rgba(255, 235, 80, 0.45) 62%,
        transparent 33%
    );
    padding: 10px;
}

aside p{
    margin-bottom: 10px;
}

/*End aside*/



.content section{
	margin-bottom:20px;
    padding:30px 50px 30px 60px;
}


.content h2 {
    position: relative;
    display: inline-block;
  
}

.content h2::after {
    content: "";
    position: absolute;
    left: -3px;
    right: -6px;
    bottom: 5px;
    height: 7px;

    background:
        linear-gradient(
            2deg,
            transparent 45%,
            #171717 46%,
            #171717 70%,
            transparent 71%
        );

    transform: rotate(-2deg);
      
}

.page_name {
  font-size: 32px;
  text-align: center;
  padding-top: 20px;
  padding-left: 100px;
  padding-bottom: 0px;
  margin-bottom: -50px;
}



.blue{
    margin: 30px 40px 30px 20px;
    
    background-image:
    url("../images/backgrounds/color_paper_blue.png");
    border-radius: 3px;
    clip-path: polygon(
        0% 2%, 3% 0%, 8% 1%, 15% 0%,
        25% 2%, 35% 1%, 45% 0%,
        55% 2%, 65% 1%, 75% 0%,
        85% 2%, 95% 1%, 100% 3%,

        99% 20%, 100% 40%, 98% 60%,
        100% 80%, 98% 100%,

        80% 99%, 60% 100%, 40% 98%,
        20% 100%, 0% 98%,

        2% 80%, 0% 60%, 2% 40%, 0% 20%
    );
}

.blue h2::after {
    content: "";
    position: absolute;
    left: -3px;
    right: -6px;
    bottom: 4px;
    height: 7px;

    background:
        linear-gradient(
            0deg,
            transparent 0%,
            transparent 10%,
            #171717 11%,
            #171717 25%,
            transparent 26%
        ),

        linear-gradient(
            1deg,
            transparent 65%,
            #171717 66%,
            #171717 80%,
            transparent 81%
        );

    transform: rotate(-1deg);
}


.purple{
    margin: 30px 40px 30px 20px;
  
    background-image:
    url("../images/backgrounds/color_paper_purple.png");
    border-radius: 3px;
    clip-path: polygon(
        0% 2%, 3% 0%, 8% 1%, 15% 0%,
        25% 2%, 35% 1%, 45% 0%,
        55% 2%, 65% 1%, 75% 0%,
        85% 2%, 95% 1%, 100% 3%,

        99% 20%, 100% 40%, 98% 60%,
        100% 80%, 98% 100%,

        80% 99%, 60% 100%, 40% 98%,
        20% 100%, 0% 98%,

        2% 80%, 0% 60%, 2% 40%, 0% 20%
    );

}


.purple h2::after {
    content: "";
    position: absolute;
    left: -3px;
    right: -6px;
    bottom: 5px;
    height: 7px;

    background:
        linear-gradient(
            2deg,
            transparent 45%,
            #171717 46%,
            #171717 60%,
            transparent 61%
        );

    transform: rotate(-2deg);
}


.green{
    margin: 30px 40px 30px 20px;
  
    background-image:
    url("../images/backgrounds/color_paper_green.png");
    border-radius: 3px;
    clip-path: polygon(
        0% 2%, 3% 0%, 8% 1%, 15% 0%,
        25% 2%, 35% 1%, 45% 0%,
        55% 2%, 65% 1%, 75% 0%,
        85% 2%, 95% 1%, 100% 3%,

        99% 20%, 100% 40%, 98% 60%,
        100% 80%, 98% 100%,

        80% 99%, 60% 100%, 40% 98%,
        20% 100%, 0% 98%,

        2% 80%, 0% 60%, 2% 40%, 0% 20%
    );
}


.green h2::after {
    content: "";
    position: absolute;
    left: -3px;
    right: -6px;
    bottom: 4px;
    height: 7px;

    background:
        linear-gradient(
            1deg,
            transparent 0%,
            transparent 10%,
            #171717 11%,
            #171717 25%,
            transparent 26%
        ),

        linear-gradient(
            1deg,
            transparent 65%,
            #171717 66%,
            #171717 80%,
            transparent 81%
        );

    transform: rotate(-1deg);
}


.blue,
.purple,
.green {
    position: relative;
}


.blue ul,
.purple ul,
.green ul {
    font-size:16px;
    line-height:1.6;  
    padding-bottom: 10px;
}


.blue h2,
.purple h2,
.green h2 {
    position: relative;
    display: inline-block;
}

.blue h3,
.purple h3,
.green h3 {
    color:#33435c;
    line-height:1.4;
}

.blue p,
.purple p,
.green p {
    font-size:16px;
    line-height:1.6;
    text-align: justify;
    text-indent: 30px;
    padding-bottom: 10px;
}
    
    
    
/*Home*/    

.smallgallery{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:20px;
}

.smallgallery img{
	width:100%;
    height: 100%;
	object-fit:contain;
    overflow: hidden;

    clip-path: polygon(
        1% 2%,
        50% 0%,
        99% 2%,
        100% 50%,
        98% 99%,
        50% 100%,
        1% 98%,
        0% 50%
    );
}


/*End home*/



/*About me*/

.about_me {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
}

.about_image {
    text-align: right;
}

.about_me img{
    width: 130%;
    height: auto;
}

.special-h3 {
    padding-top: 20px;
}

.special-p {
    padding-top: 20px;
    font-size:15px;
    line-height:1.5;
}

/*End about me*/



/*News*/

.news_text_right {
  padding-right:120px;
}

.sticker_inside_right {
    position: absolute;
    width: 130px;
    height: auto;

    top: 50px;
    right: 30px;
    
    transform: rotate(-6deg);

}


.news_text_left {
  padding-left:120px;
}

.sticker_inside_left {
    position: absolute;
    width: 130px;
    height: auto;

    top: 50px;
    left: 50px;
    
    transform: rotate(6deg);

}


.sticker_outside_1 {
    position: absolute;
    width: 170px;
    height: auto;

    top: 10px;
    right: 120px;
    z-index:10;
    
    transform: rotate(-6deg);  
}


.sticker_outside_2 {
    position: absolute;
    width: 170px;
    height: auto;

    top: 350px;
    left: 20px;
    z-index:10;
    
    transform: rotate(-6deg);  
}

.sticker_outside_3 {
    position: absolute;
    width: 170px;
    height: auto;

    top: 500px;
    left: 100px;
    z-index:10;
    
    transform: rotate(6deg);  
}


/*End news*/


/*art archive*/

.gallery {
    column-count: 4;
    column-gap: 10px;

    width: 100%;
}

.gallery-item {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 10px;
    break-inside: avoid;
    overflow: hidden;
}

.gallery-item img {
    display: block;

    width: 100%;
    height: auto;

    transition: transform 0.25s ease;
}

.gallery-item:hover img {
    transform: scale(1.01);
}

.gallery-caption {
    position: absolute; 
    left: 0; 
    bottom: 0;

    width: 100%;

    padding: 10px;
    box-sizing: border-box;

    background: rgba(0, 0, 0, 0.65);
    color: white;

    font-size: 14px;
    line-height: 1;
    

    opacity: 0;
    transition: opacity 0.25s ease;
}

.gallery-item:hover .gallery-caption {
    opacity: 1;
}




.lightbox {
    position: fixed;

    inset: 0;

    z-index: 9999;

    background: rgba(0, 0, 0, 0.9);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.25s ease;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox img {
    max-width: 95vw;
    max-height: 95vh;

    width: auto;
    height: auto;

}

.lightbox-close {
    position: absolute;

    top: 20px;
    right: 30px;

    border: none;
    background: none;

    color: white;

    font-size: 45px;
    line-height: 1;

    cursor: pointer;

    z-index: 10000;
}

/*end of art archive*/




.video {
    
    width: 100%;
    aspect-ratio: 16 / 9;
}

.video iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}





footer {
    background-color: #141426;
    padding: 10px 20px;
    text-align: center
}

footer p{
    
    font-weight: bold;
    color:#5291AA;
}



@media (max-width: 700px) {
  
    main {
        grid-template-columns: 1fr;
        z-index: 10;
    }

    aside {
        order: 1;
    }
    
    aside img {
      width: 100%;
      transform: translateX(-20px);
      padding-bottom:15px;
    }
    
    aside p {
      margin-left:-20px;
    }
    

    .content {
        order: 2;
    }
  
    nav {
        flex-wrap: nowrap;
        align-items: flex-start;
        width: 100%;
        position: relative;
        z-index: 5;
    }

    nav a {
        flex: 1 1 0;
        min-width: 0;
        font-size:16px;
        padding-left: 10px;
        margin-left: -8px;
        position: relative;
          
    }
    
    .content section {
        padding: 30px 30px;
    }

    .blue,
    .purple,
    .green {
        margin: 5px 5px 5px -20px;
    }

  .about_me {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .about_me img {
        width: 100%;
    }
  
    .smallgallery {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    
    
    .news_text_right {
        padding-right:60px;
    }

    .sticker_inside_right {
        width: 70px;
        height: auto;

        top: 80px;
        right: 10px;
    
        transform: rotate(-6deg);
      }


    .news_text_left {
        padding-left:60px;
    }

    .sticker_inside_left {
        width: 70px;
        height: auto;
        
        top: 80px;
        left: 10px;
    
        transform: rotate(6deg);
    }


    .sticker_outside_1 {
        width: 110px;
        height: auto;

        top: 280px;
        right: 10px;
        z-index:10;
    
        transform: rotate(-6deg);  
    }


    .sticker_outside_2 {
        width: 110px;
        height: auto;

        top: 400px;
        left: 20px;
        z-index:10;
    
        transform: rotate(-6deg);  
    }

    .sticker_outside_3 {
        width: 110px;
        height: auto;

        top: 360px;
        left: 200px;
        z-index:10;
    
        transform: rotate(6deg);  
    }
    
  
  
   .gallery {
        column-count: 2;
        column-gap: 7px;
        margin-left: -5px;
        margin-right: -15px;
        
        
    }

    .gallery-item {
        margin-bottom: 8px;
        line-height: 1;
    }
  
  
    .gallery-caption {
        position: static;
        opacity: 1;

        background: none;
        color: inherit;

        padding: 5px 0 0;
        
    } 

}



@media (min-width: 701px) and (max-width: 1000px) {
     
    main {
       z-index: 10;
    }

    
    aside img {
      width: 100%;
      transform: translateX(-20px);
      padding-bottom:15px;
    }
    
    aside p {
      margin-left:-20px;
    }
    
    
    .content section {
        padding: 30px 30px;
    }

    .blue,
    .purple,
    .green {
        margin: 5px 5px 5px -20px;
    }

    .about_me {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    
    .about_me img {
        width: 100%;
    }
  
  
  
      .news_text_right {
        padding-right:90px;
      }

      .sticker_inside_right {
        width: 100px;
        height: auto;

        top: 50px;
        right: 15px;
    
        transform: rotate(-6deg);
      }


      .news_text_left {
        padding-left:90px;
      }
    
      .sticker_inside_left {
        width: 100px;
        height: auto;

        top: 50px;
        left: 15px;
    
        transform: rotate(6deg);
      }


      .sticker_outside_1 {
        width: 120px;
        height: auto;

        top: 5px;
        right: 40px;
        z-index:10;
    
        transform: rotate(-6deg);  
      }


      .sticker_outside_2 {
        width: 140px;
        height: auto;

        top: 300px;
        left: 15px;
        z-index:10;
    
        transform: rotate(-6deg);  
      }

      .sticker_outside_3 {
        position: absolute;
        width: 140px;
        height: auto;

        top: 400px;
        left: 90px;
        z-index:10;
    
        transform: rotate(6deg);  
      }
  
  
  
   .gallery {
        column-count: 3;
        column-gap: 7px;
        margin-left: -5px;
        margin-right: -15px;    
        
    }

    .gallery-item {
        margin-bottom: 8px;
        line-height: 1;
    }
  
  
    .gallery-caption {
        position: static;
        opacity: 1;

        background: none;
        color: inherit;

        padding: 5px 0 0;
        
    }
      

}