/* Desktop view 지정 (1200 px 이상) */

/* import */

@import url("fonts.css");

/* 약어 정리 */

:root{
 --blue:#003DA5;
 --red:#D62828;
 --yellow:#F4C300;
 --void:#FFFFFF;
 --gap:4px;
}

/* 전체 요소 */

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

body{
background:#000;
}


/* body의 portal grid */


.portal_grid{
display:grid;
gap:var(--gap);
font-family:'Jeju Gothic',sans-serif;
width:min(1440px,95vw);
margin:0 auto;
grid-template-columns:repeat(8,1fr);
grid-template-rows:140px 140px 140px 140px 140px;
grid-template-areas:
"web web me me void1 void1 void1 news"
"recent recent recent void2 essay essay essay void3"
"recent recent recent void2 essay essay essay version"
"void4 article article article void5 album album album"
"guest social social void6 void7 album album album";
}

.card{
display:flex;
align-items:flex-start;
justify-content:flex-start;
padding:6px;
text-decoration:none;
font-size:1rem;
line-height:1.2;
transition:background .2s ease;
}

/* 개별 grid */

.whitelink{color:#fff;}
.blacklink{color:#000;}
.intro_website{grid-area:web;background:var(--blue);}
.intro_fluorf{grid-area:me;background:var(--red);}
.news{grid-area:news;background:var(--yellow);}

.recent_posts{
grid-area:recent;
background:#fff;
color:#000;
padding:6px;
}

.daily_essay{grid-area:essay;background:var(--blue);}

.version{
grid-area:version;
background:#111;
color:#fff;
padding:6px;
display:grid;
align-content:end;
}

.article{grid-area:article;background:var(--yellow);}

.album{
grid-area:album;
background-image: url("../../album/album.jpg");
background-size: cover;
opacity:0.6;
color:#000;
}

.guestbook{grid-area:guest;background:var(--red);}


.void{background:var(--void);}

.void_01{grid-area:void1;}

.void_02{
grid-area:void2;
animation:color_change_01 10s;
animation-iteration-count:infinite;
}

@keyframes color_change_01{
0%          {background:white;}
50%   	{background:black;}
100%        {background:white;}
}

.void_03{grid-area:void3;}

.void_04{
grid-area:void4;
background:var(--blue);
}

.void_05{
grid-area:void5;
animation:color_change_02 20s;
animation-iteration-count:infinite;
}

@keyframes color_change_02{
0%          {background:var(--red);}
33.33333%   {background:var(--blue);}
66.66666%   {background:var(--yellow);}
100%        {background:var(--red);}
}

.void_06{grid-area:void6;}

.void_07{grid-area:void7;background:var(--yellow);}




/* hover 효과 */

.intro_website:hover,.daily_essay:hover{
background:#000;
}
.intro_fluorf:hover,.guestbook:hover{
background:var(--yellow);
}
.news:hover,.article:hover{
background:var(--red);
}
.album:hover{
opacity:1;
}




/* Tablet view 지정 (768~1199 px) */

@media screen and (max-width:1199px){

.portal_grid{
display:grid;
gap:var(--gap);
grid-template-columns:repeat(6,1fr);
grid-template-rows:140px 140px 140px 280px 140px;
grid-template-areas:
"web web me me void1 news"
"recent recent recent essay essay void3"
"recent recent recent essay essay version"
"void4 article article album album album"
"guest void2 void2 void6 social social";
}

.version{
font-size:0.8rem;
}

}


/* Mobile view 지정 (767 px 이하) */

@media screen and (max-width:767px){

.portal_grid{
grid-template-columns:repeat(4,1fr);
grid-template-rows:100px 100px 200px 200px 100px;
grid-template-areas:
"web web me me"
"news void1 essay essay"
"recent recent article article"
"album album void2 guest"
"void3 version social social";
}

.version{
font-size:0.8rem;
}

}