@import url('https://fonts.googleapis.com/css2?family=Exo+2&display=swap');
/*CSS変数格納用疑似クラス var(変数名, フォールバック値)で呼び出し*/
:root {
	--col-bg: rgb(54,57,59);
	--col-ah: rgb(214,107,93);
}


/*CSSハック*/
html {
	height: 100%;
}

html>/**/body {
	overflow: -moz-scrollbars-vertical;
}

html:first-child body {
	min-height: 100%;
	padding-bottom: 1px;
}

BODY {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	background-color:var(--col-bg, #555);
	font-size: 0.8em;
}

header{
color: rgb(249,243,207);
font-family: 'Exo 2', sans-serif;
margin-left: 125px;
margin-bottom: 1em;
font-size: 2.7em;
}
header::before{
content:"Roundog's Garage";
padding: 0 0 0.4em 0.2em;
box-shadow: -25px 0 0 rgb(238,230,171), -50px 0 0 rgb(197,188,142), -75px 0 0 rgb(105,103,88), -100px 0 0 rgb(69,72,75);
}

main{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
 height:60%;
}

div#card{
width: 100%;
padding:2.2em;
}

.col1{
transform: rotateZ(-1deg);
color: rgb(54,57,59);
background-color:rgb(238,230,171);
}
.col1 a{
font-size: 1.4em;
color: rgb(54,57,59);
}

.col2{
transform: rotateZ(2deg);
color: rgb(105,103,88);
background-color:rgb(197,188,142);
}
.col2 a{
font-size: 1.4em;
color: rgb(105,103,88);
}

.col3{
transform: rotateZ(-2deg);
color: rgb(197,188,142);
background-color:rgb(105,103,88);
}
.col3 a{
font-size: 1.4em;
color: rgb(197,188,142);
}

.col4{
color: rgb(238,230,171);
background-color:rgb(69,72,75);
}
.col4 a{
color: rgb(238,230,171);
}

a:hover{
color:var(--col-ah, #cc0000);
}

footer{
clear: both;
padding: 2em;
text-align:right;
}

input, textarea, iframe{
color: rgb(238,230,171);
margin-top: 0.5em;
border: solid 1px rgb(238,230,171);
background-color: transparent;
}