@charset "utf-8";

@font-face {
    font-family: Quicksand;
    src: url('Quicksand-Regular.woff') format('woff');
    src: url('Quicksand-Regular.tff') format('truetype');
}
/* html styles */
html {
    background-image: url(../images/background_img_cs-2350.png);
    background-repeat: repeat;
    background-position: bottom right;
    background-size: 15%;
    background-origin: content-box;
}

/* body page styles */
body {
    border-left: 1px solid rgb(51,51,51);
    border-right: 1px solid rgb(51,51,51);
    box-shadow: rgb(51,51,51) 15px 0px 25px,
    rgb(51,51,51) -15px 0px 25px;
    margin: 5% 10% 15% 10%;
    /* margin-bottom: 15%; */
 }

/* headline styles */

h1, h2 {
    font-family: Quicksand, Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
    list-style-type: none;
    text-shadow: rgb(181, 211, 181) 2px 2px 1px, 
    rgba(21,21,21,0.66) 5px 5px 25px;
}
h3 {
    font-size: medium;
    font-weight: normal;
    list-style-type: none;
}

h4 {
    font-size: large;
    font-variant: small-caps;
    list-style-type: none;
}

/* header styles */

header {

    background-color: rgb(66, 55, 162);
    border: 4px double white;
    border-radius: 30px;
}
header h1 {
    color: white;
    font-size: xx-large;

    text-align: center;
    font-weight: bold;
    list-style-type: none;
}
/* grid styling        */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    background-color:lightgrey;
    font-family: Quicksand, Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    
}
.grid-container .container-1 ul li, .grid-container .container-2 ul li, .grid-container .container-3 ul li, .grid-container .container-4 ul li, .grid-container .container-5 ul li, .grid-container .container-6 ul li {
    list-style-type: none;
}

.grid-container .container-1 ul li a:active, .grid-container .container-2 ul li a:active, .grid-container .container-3 ul li a:active, .grid-container .container-4 ul li a:active, .grid-container .container-5 ul li a:active, .grid-container .container-6 ul li a:active {
    color:rgb(236, 107, 195);

}
.grid-container .container-1 ul li a:hover, .grid-container .container-2 ul li a:hover, .grid-container .container-3 ul li a:hover, .grid-container .container-4 ul li a:hover, .grid-container .container-5 ul li a:hover, .grid-container .container-6 ul li a:hover {
    color: rgb(32, 245, 21)
}

.grid-container .container-1 ul li a:visited, .grid-container .container-2 ul li a:visited, .grid-container .container-3 ul li a:visited,  .grid-container .container-4 ul li a:visited,  .grid-container .container-5 ul li a:visited,  .grid-container .container-6 ul li a:visited {
    color:rgb(131, 123, 129);
} 

/* toolbar styling */

.toolbar {
    column-count: 3;
    font-weight: bolder;
    font-size: x-large;
    background: url(../komatsu_family/images/tb_back4.png) 100% / cover no-repeat, rgb(211,211,211);
    box-shadow: inset rgb(71, 71, 71) -10px -10px 25px,
    inset rgb(71, 71, 71) 10px 10px 25px;
    
 
}
body > header > .toolbar > ul > li {
    text-decoration: none;
    list-style-type: none;
    text-align: center;
}

body header .toolbar > ul > li > a {
    color: turquoise;
}
.toolbar  ul  li a:hover {
    color:rgb(12, 139, 5);
    list-style-type: none;
}

.toolbar ul li a:active {
    color:blueviolet;
}

.toolbar ul li a:visited {
    color:orangered;
    list-style-type: none;
}


footer {
    text-align: center;
    background-color: lightgray;
    text-shadow: rgb(181, 211, 181) 2px 2px 1px, 
    rgba(21,21,21,0.66) 5px 5px 25px;
    font-family: Quicksand, Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
    list-style-type: none;
    border: 5px solid white;
    border-width: 100%;
  }

body > .grid-container > .container-1, body > .grid-container > .container-4{
    background-color: palegoldenrod;
}
body > .grid-container > .container-2, body > .grid-container > .container-5{
    background-color:paleturquoise;
}
body > .grid-container > .container-3, body > .grid-container > .container-6 {
    background-color: palegoldenrod;
}