#sidebar-wrapper .sidebar-heading{
    padding: 0.5em 0rem !important;
}

.list-group-item-dark {
    background-color: #303030 !important;
}

.border-bottom {
    border-bottom: 1px solid #757575!important;
}

.border-end {
    border-right: 1px solid #757575 !important;
}

#page-content-wrapper {
    text-align: center;
}

.carousel-indicators {
    top: 10px;
}

.carousel-caption {
    bottom:-20px;
}

.difficulty-caption {
    top:20px;
}

.carousel-inner {
    height:80vh;
}

.back-btn {
    position : absolute;
    bottom   : 0 !important;
    z-index: 1337;
    width: 100%;
    left: 0;
    right: 0;
}

#link-back{
    font-size: 6vh !important;
    color:white;
    -webkit-text-stroke-width: 0px;
    text-decoration: none !important;
    display: block;
    position: fixed;
    bottom: 0;
    left:50%;
  	transform:translateX(-50%);
    text-align: center;
}

.carousel-item {
    -webkit-transition: -webkit-transform 0.1s ease-in-out !important;
    -o-transition: -o-transform 0.1s ease-in-out !important;
    transition: transform 0.1s ease-in-out !important;
    height:500px;
    max-width: 100%;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 30px;
    height: 30px;
}

.video-title {
    margin-top:15px;
}

h1 {
    z-index: 1000;
    font-weight: 800;
    font-size:8vh;
    color: white;
    -webkit-text-fill-color: white; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
    text-align: center;
}

h4 {
    text-align: center;
}

a {
    color:inherit;
    text-decoration: inherit;
}

#link-printer:hover {
    color: #f95201;
    -webkit-text-fill-color: #f95201; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

#link-microbit:hover {
    color: rgb(245 209 128);
    -webkit-text-fill-color: rgb(245 209 128); /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

#link-laser:hover {
    color: #3184c6;
    -webkit-text-fill-color: #3184c6; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

#link-inspiration:hover {
    color: #00d7cf;
    -webkit-text-fill-color: #00d7cf; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

#link-folie:hover {
    color: #99afca;
    -webkit-text-fill-color: #99afca; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

#link-pi:hover {
    color: #009964;
    -webkit-text-fill-color: #009964; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

#link-coding:hover {
    color: #55c9fb;
    -webkit-text-fill-color: #55c9fb; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

#link-tools:hover {
    /* Fallback: Set a background color. */
    background-color: red;
    
    /* Create the gradient. */
    background-image: linear-gradient(165deg, #57bcd3, #5a9faf);
    
    /* Set the background size and repeat properties. */
    background-size: 100%;
    background-repeat: repeat;
  
    /* Use the text as a mask for the background. */
    /* This will show the gradient as a text color rather than element bg. */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}

#link-logins:hover {
    /* Fallback: Set a background color. */
    background-color: red;
    
    /* Create the gradient. */
    background-image: linear-gradient(165deg, #ffdf40, #ffccb3);
    
    /* Set the background size and repeat properties. */
    background-size: 100%;
    background-repeat: repeat;
  
    /* Use the text as a mask for the background. */
    /* This will show the gradient as a text color rather than element bg. */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}

#link-link:hover {
    color: #18bb18;
    -webkit-text-fill-color: #18bb18; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

#link-transfer:hover {
    color: #ebdf3f;
    -webkit-text-fill-color: #ebdf3f; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

#link-modeling:hover {
    /* Fallback: Set a background color. */
    background-color: red;
    
    /* Create the gradient. */
    background-image: linear-gradient(0deg, #7e7e7e , #0eabec);
    
    /* Set the background size and repeat properties. */
    background-size: 100%;
    background-repeat: repeat;
  
    /* Use the text as a mask for the background. */
    /* This will show the gradient as a text color rather than element bg. */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}

#link-fusion:hover {
    color: #de8530;
    -webkit-text-fill-color: #de8530; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

#link-tinker:hover {
    /* Fallback: Set a background color. */
    background-color: red;
    
    /* Create the gradient. */
    background-image: linear-gradient(90deg, #22b45c , #d6d230);
    
    /* Set the background size and repeat properties. */
    background-size: 100%;
    background-repeat: repeat;
  
    /* Use the text as a mask for the background. */
    /* This will show the gradient as a text color rather than element bg. */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}

#link-slicing:hover {
    /* Fallback: Set a background color. */
    background-color: red;
    
    /* Create the gradient. */
    background-image: linear-gradient(180deg, #761e1a , #a65f27);
    
    /* Set the background size and repeat properties. */
    background-size: 100%;
    background-repeat: repeat;
  
    /* Use the text as a mask for the background. */
    /* This will show the gradient as a text color rather than element bg. */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}

#link-arcade:hover {
    color: #ebdf3f;
    -webkit-text-fill-color: #ebdf3f; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

#link-python:hover {
    /* Fallback: Set a background color. */
    background-color: red;
    
    /* Create the gradient. */
    background-image: linear-gradient(165deg, #3776a9, #ffd242);
    
    /* Set the background size and repeat properties. */
    background-size: 100%;
    background-repeat: repeat;
  
    /* Use the text as a mask for the background. */
    /* This will show the gradient as a text color rather than element bg. */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}

#link-rpi:hover {
    font-weight: 800;
    font-size:8vh;
    color: #068376;
    -webkit-text-fill-color: #068376; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

#link-orange:hover {
    font-weight: 800;
    font-size:8vh;
    color: orange;
    -webkit-text-fill-color: orange; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

#link-yellow:hover {
    font-weight: 800;
    font-size:8vh;
    color: gold;
    -webkit-text-fill-color: gold; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

#link-green:hover {
    font-weight: 800;
    font-size:8vh;
    color: palegreen;
    -webkit-text-fill-color: palegreen; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

#link-red:hover {
    font-weight: 800;
    font-size:8vh;
    color: orangered;
    -webkit-text-fill-color: orangered; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

#link-purple:hover {
    font-weight: 800;
    font-size:8vh;
    color: rebeccapurple;
    -webkit-text-fill-color: rebeccapurple; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

#link-hacker:hover {
    font-weight: 800;
    font-size:8vh;
    color: #03A062;
    -webkit-text-fill-color: #03A062; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

.guide-video {
    height:210px;
    width:100%;
    max-width: 720px;
}

.logo {
    width:200px;
}

.carousel-image{
    width:100%;
    max-height:200px;
    object-fit: cover;
}

@media screen and (min-width: 812px) {
   .carousel-item {
        background-size: contain !important;
        max-width: 800px !important;
        margin-left:auto;
        margin-right:auto;
   }
   #page-content-wrapper {
        width: 720px;
        height:100vh;
        margin-left: auto;
        margin-right: auto;
    }
}

.tool {
    margin-top:10%;
}