:root
{
--ui: #f47421; --ui-marked: #ffa854; --bg: #add692; --filter: invert(55%) sepia(66%) saturate(3784%) hue-rotate(350deg) brightness(107%) contrast(91%); }
#infobox
{
position: absolute;
top: 165px;
background-color: var(--ui-marked);
display: block;
height: 32px;
width: 33px;
padding-left: 15px;
padding-right: 15px;
padding-top: 2px;
border-style: solid;
border-width: 2px;
margin-left: -2px;
transition: width 200ms linear 0s, height 200ms linear 0s;
}
#starter
{
visibility: hidden;
opacity: 0;
color: black;
}
#infobox:hover
{
color: transparent;
height: 165px;
width: 690px;
padding-top: 0px;
border-color: black;
transition: width 400ms ease 0s, height 400ms ease 0s;
}
#infobox:hover #starter
{
visibility: visible;
opacity: 1;
color: black;
margin-top: -40px;
transition: opacity 300ms linear 250ms;
}
.project_title
{
padding-top: 45px;
}
.img-holder
{
float: left;
height: 650px;
}
.alignleft
{
float: left;
padding-right: 25px;
}
article
{
padding-bottom: 12%;
}
@media only screen and (max-width: 1080px)
{
#infobox
{
top: 240px;
width: 38px;
padding-left: 25px;
padding-right: 25px;
padding-top: 7px;
padding-bottom: 7px;
border-width: 3px;
margin-left: -3px;
}
#infobox:hover
{
height: calc(490px - 28vw);
width: calc(93.8% - 80px);
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 0px;
}
#infobox:hover #starter
{
margin-top: -48px;
}
}
@media only screen and (max-width: 900px)
{
article
{
padding-bottom: 18%;
}
}
@media only screen and (max-width: 630px)
{
article
{
padding-bottom: 25%;
}
}
@media only screen and (orientation: portrait)
{
#infobox
{
top: 260px;
width: 55px;
padding-top: 0px;
padding-bottom: 28px;
}
#infobox:hover
{
height: calc(600px + calc(350px - 55vw));
width: calc(93.8% - 80px);
line-height: 1.6;
padding-top: 0px;
}
#infobox:hover #starter
{
margin-top: -38px;
}
article
{
padding-bottom: 350px;
}
.project_title
{
font-size: 38px;
}
}