*{
  --bg-color: #e7e7e7;
  --container-color: #e9e9e9;
  --primary: #282828;
  --secundary: #404040;
  color: var(--primary);
}

html, body{
  height: 100%;
  margin: 0px;
}

.debug{
  background-color: red;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

body{
  background-image: url("../img/pattern.png");
  background-repeat: repeat;
}

.logo img{
  height: 7vh;
}

.logo{
  background-image: url("../img/logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40vh;
  padding-bottom: 10vh;
}

#portfolio{
  margin-top: 5vh;
  margin-bottom: 2vh;

  padding-top: 1vh;
  padding-bottom: 2vh;

  min-height: 93vh;
}

.port-item{
  display: block;
  margin: 1vh;
  width:100%;
  /* height:100px; */
  /* background-color:red; */
}

.badge{
  font-size: 12px;
  margin-left: 10px;
}

hr{
  border-color: rgba(0,0,0,.2);
  border-style: solid none;
  border-width: 0px 0;
  border-top-width: 1px;
  margin: 20px 0;
}

.port-title{
  font-size: 28px;
}

.port-description{
  overflow-wrap: break-word;
  color: var(--secundary) !important;
}

.footer{
  padding-left: 3vw;
  width: 100%;
  height: 5vh;
  line-height: 5vh;
  background-color: var(--primary);
}

.footer-text{
  color: var(--bg-color);
}

.container{
  background-color: var(--container-color);
}

.page{
  height: 100vh;
}

.transparent{
  background-color: transparent !important;
}

.ribbon-badge { cursor: pointer; }
.enabled {background-color:#f8f9fa;color:#212529;}
.disabled {background-color:#cccccc;color:#212529;}


@font-face {
    font-family: 'CaviarDreams';
    src: url('fonts/CaviarDreams.ttf') format('truetype');
}

.btn-ribbons{
  margin-left:2vw;

  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #282828;
  color: #e7e7e7;
  font-size: 19px;
  font-family: CaviarDreams;
}

.btn-ribbons a{
  text-decoration: none;
  color: #e7e7e7;
}

.btn-ribbons a:hover{
  color: #ffffff;
}

.btn-ribbons span{
  color: #e7e7e7;
}

#languageRibbon{
  height: 50px;
  max-width: 100%;
  overflow: scroll; /* Allow scroll */
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  /* background-color: red; */
}

.item-title{
}